{
 "cells": [
  {
   "cell_type": "markdown",
   "source": [
    "ui.spinner(color='negative')  # 旋转小图标: 用于表示正在运行/加载等"
   ],
   "metadata": {
    "collapsed": false
   },
   "id": "35544856c3b854a3"
  },
  {
   "cell_type": "markdown",
   "source": [
    "ui.separator()  # 分隔条"
   ],
   "metadata": {
    "collapsed": false
   },
   "id": "bd1d4f494226b4af"
  },
  {
   "cell_type": "markdown",
   "source": [
    "# 分隔左右:\n",
    "with ui.splitter() as splitter:\n",
    "    with splitter.before:\n",
    "        ui.label('This is some content on the left hand side.').classes('mr-2')\n",
    "    with splitter.after:\n",
    "        ui.label('This is some content on the right hand side.').classes('ml-2')"
   ],
   "metadata": {
    "collapsed": false
   },
   "id": "1604bcbf59528be"
  },
  {
   "cell_type": "markdown",
   "source": [
    "# 多个tab:\n",
    "with ui.tabs().classes('w-full') as tabs:\n",
    "    one = ui.tab('One')\n",
    "    two = ui.tab('Two')\n",
    "with ui.tab_panels(tabs, value=two).classes('w-full'):\n",
    "    with ui.tab_panel(one):\n",
    "        ui.label('First tab')\n",
    "    with ui.tab_panel(two):\n",
    "        ui.label('Second tab')"
   ],
   "metadata": {
    "collapsed": false
   },
   "id": "e4d78500f30e0509"
  },
  {
   "cell_type": "markdown",
   "source": [
    "# 步进,用于注册:\n",
    "with ui.stepper().props('vertical').classes('w-full') as stepper:\n",
    "    with ui.step('Preheat'):\n",
    "        ui.label('Preheat the oven to 350 degrees')\n",
    "        with ui.stepper_navigation():\n",
    "            ui.button('Next', on_click=stepper.next)\n",
    "    with ui.step('Ingredients'):\n",
    "        ui.label('Mix the ingredients')\n",
    "        with ui.stepper_navigation():\n",
    "            ui.button('Next', on_click=stepper.next)\n",
    "            ui.button('Back', on_click=stepper.previous).props('flat')\n",
    "    with ui.step('Bake'):\n",
    "        ui.label('Bake for 20 minutes')\n",
    "        with ui.stepper_navigation():\n",
    "            ui.button('Done', on_click=lambda: ui.notify('Yay!', type='positive'))\n",
    "            ui.button('Back', on_click=stepper.previous).props('flat')"
   ],
   "metadata": {
    "collapsed": false
   },
   "id": "26a3606def5e610a"
  },
  {
   "cell_type": "markdown",
   "source": [
    "# 自定义组件,修改属性值,使div可输入\n",
    "with ui.card().classes(\"w-[80vw] h-[60vh]\"):\n",
    "    with ui.splitter().classes(\"w-full h-full\") as splitter:\n",
    "        with splitter.before:\n",
    "            ui.label(\"This is some content on the left hand side.\").classes(\"mr-2\")\n",
    "        with splitter.after:\n",
    "            # ui.textarea().classes(\"my-full-h-area w-full h-full\")\n",
    "\n",
    "            async def oninput(e):\n",
    "                inner_text = await ui.run_javascript(\n",
    "                    f\"getElement({input_box.id}).innerText\"\n",
    "                )\n",
    "                print(inner_text)\n",
    "\n",
    "            input_box = (\n",
    "                ui.element(\"div\")\n",
    "                .classes(\"bg-red/.5 w-full h-full\")\n",
    "                .props('contenteditable=\"true\"')\n",
    "                .on(\"input\", oninput)\n",
    "            )"
   ],
   "metadata": {
    "collapsed": false
   },
   "id": "95c97f0b1bc9a80d"
  },
  {
   "cell_type": "markdown",
   "source": [],
   "metadata": {
    "collapsed": false
   },
   "id": "fd16e643938b69a5"
  },
  {
   "cell_type": "markdown",
   "source": [],
   "metadata": {
    "collapsed": false
   },
   "id": "60b230070342175"
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
